<!--参考天猫超市构建一个移动端页面-->
<!--后续改进：添加搜索框  一键到顶 下拉超过导航条导航条会显示在屏幕最上方 classList.add/remove移出添加类兼容性一般 需要自己实现添加删除类的方法
点击导航会快速调到对应的商品区域 显隐式导航中选中的元素要保持一致  竖直划屏（快速 即点即停）自己实现滚动条 两种橡皮筋效果
-->
<!--https://pages.tmall.com/wow/z/cs/act/wupr?wh_biz=tm&wh_pid=act%2Ftaokechengjie&ali_trackid=2:mm_130402922_1111150093_109787700299:1671201412_030_934516457&union_lens=lensId:OPT@1654159947@0b5f9d0b_0958_181239db8d8_1e19@01;eventPageId:1586925572118;recoveryid:1671201412_030_934516457&bxsign=tbk6I7cciPkJzy6dH1ty6r_5a6vXKBED06FkwxLXvbIJTLn7bJteA8titnfBVhaunL8V14Bpx_PphETs71zGjw7zHEZnac0KCPw1DVmhQ36jullFcqPeox0zYmk-Q-jXQrfCkerwUmrzGzG0hd-bCtEYA-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!--首先设置视口-->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title></title>
		<link rel="stylesheet" href="less/index.css">
		<link rel="stylesheet" href="less/carousel.css">
		<script src="js/damu.js"></script>
	</head>

	<body>
		<div id="wrap">
			<!--搭建头部-->
			<div class="head">
				<div class="headImg">
					<a href="https://chaoshi.m.tmall.com/?spm=a3204.14339662.header.dhome&disableNav=YES"><img src="img/tianmao.png" /></a>
				</div>
				<!--在https://www.iconfont.cn/网站下载图标-->
				<div class="headTitle">
					<a><img src="img/marketTitle.svg" /></a>
				</div>
				<div class="cart">
					<a><img src="img/cart.svg"></a>
				</div>
			</div>
			<div class="container">
				<!--轮播图区域-->
				<div class="carousel-wrap" needCarousel=true needAuto=true>
					<div class="point-wrap"></div>
				</div>
				<div class="con-wrap">
					<div class="activity">
						<div class="intro">
							<div><span>天猫超市 | 00点准时抢</span></div>
							<div>
								<a>
									<span>规则</span>
								</a>
								<a>
									<span>我的购物券</span>
								</a>
							</div>
						</div>
						<div class="discount">
							<div class="coupon">
								<div>
									<span>限量</span>
								</div>
								<div class="money">
									<span>￥</span>
									<span>5</span>
									<span>满88可用</span>
									<span>去登录</span>
								</div>
								<div class="expla">
									<span>仅限活动商品使用</span>
								</div>
							</div>
							<div class="coupon">
								<div>
									<span>限量</span>
								</div>
								<div class="money">
									<span>￥</span>
									<span>5</span>
									<span>满88可用</span>
									<span>去登录</span>
								</div>
								<div class="expla">
									<span>仅限活动商品使用</span>
								</div>
							</div>

						</div>
					</div>
					<div class="one">
						<div class="tit">
							<div><img src="img/lightning.svg" />
								<span>来翻牌抢一分钱商品</span>
							</div>
							<div><span>更多</span><img src="img/arrowright.svg" /></div>
						</div>
						<div class=" goods ">
							<div class="detail">
								<div><img src="img/cent1.png " /></div>
								<div><span>蒙牛特仑苏纯牛奶</span></div>
								<div class="price">
									<div>
										<img src="img/money.svg" />
										<span>39.</span>
										<img src="img/9.svg" /> </div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="detail">
								<div><img src="img/cent2.png " /></div>
								<div><span>清风金装M码抽纸24包dasdsadsada</span></div>
								<div class="price">
									<div>
										<img src="img/money.svg" />
										<span>59.</span>
										<img src="img/9.svg" /> </div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="detail">
								<div><img src="img/cent3.png " /></div>
								<div><span>2瓶海天上等蚝油</span></div>
								<div class="price">
									<div>
										<img src="img/money.svg" />
										<span>10.</span>
										<img src="img/9.svg" /> </div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
						</div>

						<div class="more">
							<a><span>1元起抢购，查看更多  ></span></a>
						</div>
					</div>
					<div class="nav">
						<ul class="nav-list">
							<li class="active">
								<a><span>爆款清单</span></a>
							</li>
							<li>
								<a><span>家清</span></a>
							</li>
							<li>
								<a><span>个护</span></a>
							</li>
							<li>
								<a><span>乳饮冲调</span></a>
							</li>
							<li>
								<a><span>粮油调味</span></a>
							</li>
							<li>
								<a><span>休食速食</span></a>
							</li>
							<li>
								<a><span>酒类</span></a>
							</li>
							<li>
								<a><span>奶粉复试</span></a>
							</li>
							<li>
								<a><span>纸尿裤</span></a>
							</li>
							<li>
								<a><span>用品玩具</span></a>
							</li>
							<li>
								<a><span>美妆</span></a>
							</li>
							<li>
								<a><span>健康</span></a>
							</li>
							<li>
								<a><span>日用百货</span></a>
							</li>
							<li>
								<a><span>电器数码</span></a>
							</li>
							<li>
								<a><span>生鲜</span></a>
							</li>
							<li>
								<a><span>宠物生活</span></a>
							</li>
						</ul>
						<div class="mask-btn"><img src="img/arrowdown.svg" /></div>
						<!--遮蔽菜单放在哪里要看它相对于哪个元素确定位置-->
						<div class="mask">
							<div class="mask-tit"><span>全部楼层</span></div>
							<ul class="mask-list">
								<li class="active">
									<a><span>爆款清单</span></a>
								</li>
								<li>
									<a><span>家清</span></a>
								</li>
								<li>
									<a><span>个护</span></a>
								</li>
								<li>
									<a><span>乳饮冲调</span></a>
								</li>
								<li>
									<a><span>粮油调味</span></a>
								</li>
								<li>
									<a><span>休食速食</span></a>
								</li>
								<li>
									<a><span>酒类</span></a>
								</li>
								<li>
									<a><span>奶粉复试</span></a>
								</li>
								<li>
									<a><span>纸尿裤</span></a>
								</li>
								<li>
									<a><span>用品玩具</span></a>
								</li>
								<li>
									<a><span>美妆</span></a>
								</li>
								<li>
									<a><span>健康</span></a>
								</li>
								<li>
									<a><span>日用百货</span></a>
								</li>
								<li>
									<a><span>电器数码</span></a>
								</li>
								<li>
									<a><span>生鲜</span></a>
								</li>
								<li>
									<a><span>宠物生活</span></a>
								</li>
							</ul>
						</div>
					</div>
					<div class="shop">
						<div class="shop-tit">
							<span>爆款清单</span>
						</div>
						<!--将其使用为网格布局容器-->
						<div class="shop-list">
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>
							<div class="shop-detail">
								<div class="shop-img">
									<img src="img/heatingpad.png" />
									<div class="num"><span>爆卖4万+件</span></div>
								</div>
								<div class="shop-intro">
									<div><span>小林暖宝宝保暖贴30片</span></div>
									<div class="shop-discount"><span>直降13元</span></div>
									<div class="shop-price">
										<div class="item-price">
											<span></span>
											<img src="img/money.svg" />
											<span>56.</span>
											<img src="img/9.svg" />
										</div>
										<div><img src="img/cartwhite.svg" /></div>
									</div>
								</div>
							</div>

						</div>
					</div>
					<div class="fam">
						<div class="fam-tit">
							<span>家清</span>
						</div>
						<div class="fam-list">
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
							<div class="fam-detail">
								<div class="fam-img"><img src="img/wash.png" /></div>
								<div class="fam-num"><span>月销10万+件</span></div>
								<div><span>立白30颗洗衣球</span></div>
								<div class="explain"><span>8gx30颗</span><span>抗菌</span></div>
								<div class="fam-discount"><span>直降6元</span></div>
								<div class="fam-price">
									<div class="item-price">
										<span></span>
										<img src="img/money.svg" />
										<span>19.</span>
										<img src="img/9.svg" />
									</div>
									<div><img src="img/cartwhite.svg" /></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript ">
			(function() {
				//  	禁止全部的默认事件 第三个参数要加上{passive:false}
				document.addEventListener('touchstart', function(ev) {
					ev = ev || event;
					ev.preventDefault();
				}, {
					passive: false
				})
				var targetW = 750
					//         选择适配方案
					// 		方案1 使用viewport适配 所量即所得  css像素/位图像素=完美视口/设计图宽度 
					//         以位图像素作为单位，在缩放scale设置中为完美视口/设计图宽度 就可以根据不同的设备计算出不同的css像素
					//         本种方案改变的是css像素与物理像素的比例 缺点是破坏了完美视口
					//         获得meta[viewport]然后修改
					//         使用debugger进行断点调试
					//			var metaNode = document.querySelector("meta[name='viewport' ] ");
					//			var scale = document.documentElement.clientWidth / targetW;
					//			使用viewport进行适配的时候 由于修改了initial-scale的倍数 所以minimun-scale和maximun-scale的倍数也要改变
					//			debugger;
					//			metaNode.content="initial-scale="+scale+" ,minimun-scale="+scale+" ,maximun-scale="+scale+" ,user-salable=no ";
					//			方案2 使用rem适配 推荐
					//         改变的是元素的css像素
					//         对html的font-size进行调试 创建style标签进行设置然后添加在head后面
				var styleNode = document.createElement("style")
					//         让视口变成16rem 也可以是其他数值
				var size = document.documentElement.clientWidth / 16;
				styleNode.innerHTML = "html{font-size: " + size + "px} "
				document.head.appendChild(styleNode)
				
				//在html里指定数组图片更加灵活 从图片相对路径来说也更加方便
				var arr=['img/swiperImg1.png','img/swiperImg1.png','img/swiperImg1.png','img/swiperImg1.png','img/swiperImg1.png'];
                //从外部引入控制轮播图的js 因为轮播图的有无是可以控制的 所以实现其行为和样式都需要分别模块化然后引入
                damu.swiper(arr);
                
//              导航点击变色 确定点击： 在list上绑定事件 如果点击后有移动的话就改变初始值，代表不是点击 根据这个初始值决定要不要添加active类的item
                var navList=document.querySelector('.nav-list')
                changeNavColor(navList);
                var masklist=document.querySelector('.mask-list')
                changeNavColor(masklist);
                function changeNavColor(list){
                	var items=list.children;
                	var isMove=false
                	list.addEventListener('touchstart',function(){
                		isMove=false
                	})
                	list.addEventListener('touchmove',function(){
                		isMove=true
                	})
                	list.addEventListener('touchend',function(ev){
                		if(isMove) return
                		ev=ev||event
                		var touchc=ev.changedTouches[0]
                		for(let i=0;i<items.length;i++){
                			items[i].classList.remove('active')
                		}
                		//获得点击节点
                		if(touchc.target.nodeName.toUpperCase()==='LI')
                		touchc.target.classList.add('active')
                		else if(touchc.target.nodeName.toUpperCase()==='A')
                		touchc.target.parentNode.classList.add('active')
                		else if(touchc.target.nodeName.toUpperCase()==='SPAN')
                		touchc.target.parentNode.parentNode.classList.add('active')
                	})
                }
                //拖拽导航
                damu.drag()
                
//              对本页遮罩进行处理 按钮要换成雪碧图
                //使用逻辑
                showMask()
                //定义封装逻辑
                function showMask(){
                	var maskBtn=document.querySelector('.mask-btn')
                	var mask=document.querySelector('.mask')
                	var show=false
                	maskBtn.addEventListener('touchstart',function(){
                		if(!show){
                			mask.style.display='block'
                		}
                		else{
                			mask.style.display='none'
                		}
                		show=!show
                	})
                }
			})()
		</script>
	</body>

</html>